import AbstractField from '@/components/hhd/design/FormDesigner/field/comps/AbstractField';
import {createDefaultFieldElement} from '@/utils/FormDesignUtils';
import {createField} from '@/components/hhd/design/FormDesigner/types';
import {guid} from '@/utils';
import $ from 'jquery';

export default class Time extends AbstractField {
    getFieldComponentTitle() {
        return '日期时间';
    }

    getFieldComponentName() {
        return 'time';
    }

    getDefaultConfig() {
        return new Promise((resolve) => {
            let field = createField();
            field.id = guid();
            field.component = 'time'
            field.fieldName = '日期时间'
            field.label = '日期时间'
            field.placeholder = '请选择时间'
            resolve(field);
        });
    }

    createFieldElement() {
        return new Promise((resolve) => {
            resolve(this.createDefaultFieldElement());
        })
    }

    setFieldTitle(el, fieldConfig) {
        $(el).find('span[data-role=field-title]').html(fieldConfig.label);
    }

    createDefaultFieldElement() {
        let res = createDefaultFieldElement();
        res.innerHTML = '<div><span style="position: relative" data-role="field-title">日期时间</span><span class="ant-time-picker-icon"><i aria-label="图标: clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></div>'
        return res;
    }
};
